@extends('layouts.admin')
@section('static-top')
    <link rel="stylesheet" href="{{ asset('asset/datatables/css/jquery.dataTables.min.css') }}">
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <div class="row">
                <div class="col-md-6">
                    <p style="font-size: 2.5rem;">问卷调查</p>
                </div>
                <div class="col-md-6 text-right">
                    <a class="btn btn-success" href="javascript:;" id="addSurvey"> <i class="fa fa-plus-circle"></i> 新增调查问卷</a>
                </div>
            </div>

            <hr style="margin-top: 0" />
            <table id="myTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>问卷</th>
                        <th>链接地址</th>
                        <th>分类</th>
                        <th>创建时间</th>
                        <th data-sortable="false">操作</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($surveys as $i => $survey)
                    <tr>
                        <td>{{ $i + 1 }}</td>
                        <td>{{ $survey['title'] }}</td>
                        <td>
                            @if($survey['cate_id'] == 2)
                                <a href="{{ url('staff/index', [$survey['id']]) }}" target="_blank">{{ url('staff/index', [$survey['id']]) }}</a>
                            @else

                            @endif
                        </td>
                        <td>{{ $survey['cate'] }}</td>
                        <td>{{ $survey['create_at'] }}</td>
                        <td>
                            <a href="{{ url('/admin/survey/'.$survey['id']) }}" class="btn btn-primary btn-xs" data-id="{{ $survey['id'] }}"> <i class="fa fa-file-text-o"></i> 查看</a>
                            <span class="btn btn-warning btn-xs copySurvey" data-id="{{ $survey['id'] }}" data-title="{{ $survey['title'] }}"> <i class="fa fa-files-o"></i> 复制</span>
                            <span class="btn btn-danger btn-xs deleteSurvey" data-id="{{ $survey['id'] }}"> <i class="fa fa-trash"></i> 删除</span>
                            <a href="{{ url('/admin/survey/chart', [$survey['id']]) }}" class="btn btn-success btn-xs" data-id="{{ $survey['id'] }}"> <i class="fa fa-bar-chart"></i> 统计 </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection
@section('static-bottom')
    <script src="{{ asset('asset/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('asset/datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script>
        $(document).ready(function(){
            $('#myTable').DataTable({
//                "initComplete": function () {
//                    $('#myTable_length').parent().append('<button class="btn btn-default"  type="button" id="reload" data-toggle="modal" data-target="#employeeModal">刷新表格</button>');
//                },
                "language": {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "未搜索到数据",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                }
            });

//            layer.alert('hello world');

            //点击新增问卷调查, 显示新增弹窗
            $('#addSurvey').click(function(){
                var _html = '<form id="addSurveyForm" style="padding: 1rem" onsubmit="return false;">\
                        <div class="form-group">\
                        <input type="text" name="title" class="form-control" placeholder="问卷标题...">\
                        </div>\
                        <div class="form-group">\
                        <textarea class="form-control" name="intro" rows="3" style="resize:none;" placeholder="问卷描述..."></textarea>\
                        </div>\
                        <div class="form-group">\
                        <select name="cate_id" class="form-control">\
                        @foreach($cates as $cate)
                        <option value="{{ $cate->id }}">{{ $cate->title }}</option>\
                        @endforeach
                        </select>\
                        </div>\
                        <center>\
                        <button type="button" class="btn btn-success" id="addSurveyButton"><i class="fa fa-plus-circle"></i> 新增</button>\
                        <button type="button" class="btn btn-danger" id="cancelSurveyButton"><i class="fa fa-times-circle"></i> 取消</button></center>\
                        </form>';
                layer.open({
                    type: 1,
                    title: '<p style="font-size: 1.8rem;font-weight: bold;text-align: center">新增问卷</p>',
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '330px'], //宽高
                    content: _html,
                    success: function(layero, index){   //弹窗成功后给两个button绑定操作
                        $("#cancelSurveyButton").click(function(){  //取消按钮, 关闭所有弹窗
                            layer.closeAll();
                        });
                        $('#addSurveyButton').click(function(){ //新增按钮, 添加新的调查问卷
                            let _form = $('#addSurveyForm');
                            //判断提交内容是否非空
                            let _title =  _form.find('input[name=title]').val();
                            if(!_title){    //当标题为空是, 提示错误
                                layer.msg('标题不能为空...', {
                                    time: 1000,
                                    anim: 6
                                });
                                return;
                            };

                            let _index = layer.load();
                            //验证通过,发送ajax请求添加新的问卷
                            $.post('{{ url('api/addSurvey') }}', _form.serialize(), function(e){
                                layer.close(_index);
                                if(e.code === 0){   //添加成功
                                    layer.msg('添加成功', {
                                        icon: 1,
                                        time: 0,
                                        btn: ['继续添加', '返回'],
                                        yes: function(index){
                                            layer.close(index);
                                            _form[0].reset();
                                        },
                                        btn2:function(){
                                            layer.closeAll();
                                            window.location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg('添加失败', {
                                        icon: 5,
                                        time: 0,
                                        btn: ['重试', '返回'],
                                        yes: function(index){
                                            layer.close(index);
                                        },
                                        btn2:function(){
                                            layer.closeAll();
                                        }
                                    });
                                }
                            })
                        });
                    }
                });
            }).keydown(function(event){
                //按回车会触发这个对象的点击事件, 禁用回车
                if(event.keyCode == 13){
                    return false;
                }
            });

            //删除问卷
            $('body').on('click', '.deleteSurvey', function(){
                let _id = $(this).data('id');

                layer.confirm('确定要删除吗?', {
                    icon: 2,
                }, function(index){ //确定
                    //发送请求删除当前提问和提问的选项
                    let _index = layer.load();
                    $.post('{{ url("api/deleteSurvey") }}', { id: _id }, function(e){
                        layer.close(_index);
                        if(e.code === 0){   //删除成功
                            layer.msg('删除成功',{
                                time: 1000,
                                end: function(){
                                    layer.closeAll();
                                    window.location.reload();
                                }
                            });
                        }else{
                            layer.msg(e.msg, {
                                icon: 5,
                                time: 0,
                                btn: ['重试', '返回'],
                                yes: function(index){
                                    layer.close(index);
                                },
                                btn2:function(){
                                    layer.closeAll();
                                }
                            });
                        }
                    });
                });
            });

            //复制问卷
            $('body').on('click', '.copySurvey', function(){
                let _id = $(this).data('id');   //当前问卷的id
                let _title = $(this).data('title');   //当前问卷的title
                layer.prompt({
                    formType: 0,
                    value: _title,
                    title: '请输入新的问卷名',
                }, function(value, index, elem){
//                    alert(value); //得到value
                    let _index = layer.load();
                    //发送ajax 请求复制一份问卷
                    $.post('{{ url("api/copySurvey") }}', {id: _id, title: value}, function(e){
                        layer.close(_index);
                        console.debug(e);
                        if(e.code === 0){   //删除成功
                            layer.msg('复制成功',{
                                time: 1000,
                                end: function(){
                                    layer.closeAll();
                                    window.location.reload();
                                }
                            });
                        }else{
                            layer.msg(e.msg, {
                                icon: 5,
                                time: 0,
                                btn: ['重试', '返回'],
                                yes: function(index){
                                    layer.close(index);
                                },
                                btn2:function(){
                                    layer.closeAll();
                                }
                            });
                        }
                    });

//                    layer.close(index);
                });
            });
        });
    </script>
@endsection